import React, {
    Component
} from "react";
import {
    Modal,
    Tooltip,
    Form,
    Table,
    Row,
    Col,
    Spin,
    Divider,
    DatePicker,
    message,
    Button,
    Tabs,
    Input,
    Upload,
    Icon
} from 'antd';
import locale from "antd/lib/date-picker/locale/zh_CN";
import {

} from "../../../fetch/fetchApi";
import classNames from 'classnames';

class LogDetail extends Component {
    constructor(props) {
        super(props);
        this.init();
        this.state = {
            data: [],
            pagination: {}
        }

    }

    init() {
        this.tableColumns = [{
            title: '参数字段',
            dataIndex: 'name',
            key: 'name'
        }, {
            title: '变更前',
            dataIndex: 'beforeUpdate',
            key: 'beforeUpdate',
            className: 'column-nowrap'
        }, {
            title: '变更后',
            dataIndex: 'afterUpdate',
            key: 'after',
        }]
    }

    showDetailModal = (key) => {
        this.setState({
            visible: true
        })
    }

    combineData(record) {
        let allParams = [];
        const cfgAfter = record.cfgAfter || [];
        const cfgBefore = record.cfgBefore || [];
        const allItems = [];

        cfgAfter.map((item, index) => {
            item.children.map((childItem, childIndex) => {
                allItems.push(childItem);
            })
        })

        cfgBefore.map((item, index) => {
            item.children.map((childItem, childIndex) => {
                let arr = allItems.filter((item1) => item1.id === childItem.id);
                if (arr.length === 0) {
                    allItems.push(childItem);
                }
            })
        })

        allItems.map((item, index) => {
            let isPlatformConfigHas = false;
            cfgAfter.map((item1, index1) => {
                item1.children.map((childItem, childIndex) => {
                    if (childItem.id === item.id) {
                        childItem.afterUpdate = childItem.value;
                        allParams.push(childItem);
                        isPlatformConfigHas = true
                    }
                })
            })
            if (!isPlatformConfigHas) {
                item.afterUpdate = "";
                allParams.push(item);
            }
        })

        allParams.map((item, index) => {
            cfgBefore.map((item1, index1) => {
                item1.children.map((childItem, childIndex) => {
                    if (childItem.id === item.id) {
                        item.beforeUpdate = childItem.value;
                    }
                })
            })
        })

        allParams = allParams.filter((item) => item.afterUpdate || item.beforeUpdate);
        this.setState({
            data: allParams
        })
    }

    componentDidMount() {
        this.combineData(this.props.data);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.data && this.props.data && nextProps.data.id !== this.props.data.id) {
            const pagination = this.state.pagination;
            pagination.current = 1;
            this.setState({
                pagination
            })
            this.combineData(nextProps.data);
        }
    }

    handleTableChange = (pagination, filters, sorter) => {
        this.setState({
            pagination
        })
    }

    handleCancel = () => {
        this.setState({
            visible: false
        })
    }

    render() {

        const content = <div className="sc-page-content">
            <div className="page-panel">
                <Table onChange={this.handleTableChange} bordered dataSource={this.state.data} loading={this.state.loading} columns={this.tableColumns} pagination={this.state.pagination}/>
            </div>
        </div>
        return content
    }
}
export default LogDetail;